<template>
  <div id="writeContent" style="text-align: center;">
    <h1>《{{this.$route.params.id}}》</h1>
    <el-form ref="resourceForm">
      <el-form-item>
        <el-input
          v-model="resource.title"
          prefix-icon="el-icon-notebook-1"
          :placeholder="currentTime"
          style="margin-bottom: 10px; text-align: left;"
        >
          <template slot="prepend">标题:</template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-divider></el-divider>
        <center>
          <el-upload
            class="avatar-uploader cover-upload"
            :action="this.$const.domain + '/v1/content/upLoadCoverImage'"
            :headers="headers"
            accept="image/jpeg, image/png, image/jpg"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            name="image"
          >
            <img v-if="resource.imgUrl" :src="resource.imgUrl" class="avatar cover-image" />
            <div v-else class="cover-i">
              <i
                class="el-icon-picture avatar-uploader-icon"
                style="line-height: 100px; witdh: 100px; height: 100px"
              ></i>
              <div class="el-upload__text">点击上传封面</div>
            </div>
          </el-upload>
        </center>
      </el-form-item>
      <el-form-item>
        <el-divider></el-divider>
        <center>
          <el-tag
            :key="tag"
            v-for="tag in resource.type"
            closable
            @close="handleClose(tag)"
            size="medium"
          >{{tag}}</el-tag>
          <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          ></el-input>
          <el-button
            v-else
            class="button-new-tag"
            size="small"
            @click="showInput"
            style="margin-left: 10px;margin-right: 10px"
          >+ 文章类型</el-button>
        </center>
      </el-form-item>
      <el-form-item>
        <center>
          <el-button type="primary" @click="createCotent()">开始编辑文章</el-button>
        </center>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { myMixin } from "@/assets/js/mixin";
import { resetRes } from "@/assets/js/vuex/state";
export default {
  mixins: [myMixin],
  data() {
    return {
      inputVisible: false,
      inputValue: "",
      currentTime: this.getTime(),
      resource: {
        username: "",
        collectionName: "",
        title: "",
        id: "",
        imgUrl: "",
        type: ["媒体", "游戏"]
      }
    };
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.resource.imgUrl = file.response.data;
      this.$store.commit("setImgUrl", file.response.data);
    },
    handleClose(tag) {
      this.resource.type.splice(this.resource.type.indexOf(tag), 1);
    },
    showInput() {
      this.inputVisible = true;
      // eslint-disable-next-line no-unused-vars
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        if (inputValue.length > 0 && inputValue.length < 6) {
          if (this.resource.type.length > 2) {
            this.$message("最多添加三种标签");
            return;
          }
          if (this.resource.type.indexOf(inputValue) > -1) {
            this.$message("该标签已存在了");
            return;
          } else {
            this.resource.type.push(inputValue);
          }
        } else {
          this.$message("标签长度不能超过5个字");
        }
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    createCotent() {
      const res = this.resource;
      if (res.type.length > 0) {
        if (!res.title) {
          res.title = this.currentTime;
        }
        if (!res.imgUrl) {
          res.imgUrl =
            this.$const.domain + "/v1/file/getCover?filename=default.jpg";
        }
        this.$axios
          .post(
            this.$const.domain + "/v1/content/createResource",
            {
              imgUrl: res.imgUrl,
              title: res.title,
              type: this.getTypeString(),
              collectionName: this.$route.params.id
            },
            {
              headers: this.headers
            }
          )
          .then(res => {
            if (res.data.code == 200) {
              this.$store.commit("setResource", res.data.data);
              this.$store.commit("addResToCollection", {
                title: this.$route.params.id,
                res: res.data.data
              });
              resetRes(this.resource);
              this.$router.push("/editorContent/" + res.data.data.collectionName + "/" + res.data.data.id)
            } else {
              this.$message(res.data.msg);
            }
          });
      } else {
        this.$message("标签中至少包含一种类型!");
        return;
      }
    },
    getTypeString() {
      let str = "";
      this.resource.type.forEach(t => {
        str = str + t + ",";
      });
      return str.substring(0, str.length - 1);
    },
    getTime() {
      var date = new Date();
      return date.toDateString() + " " + date.toLocaleTimeString();
    }
  }
};
</script>

<style>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

.el-input-group__append,
.el-input-group__prepend {
  background-color: #fff1f5 !important;
  color: #fb7299 !important;
}
</style>